<!-- form field start -->
<style>
    .chosen-container-multi .chosen-choices {border-radius:0;}
    .y-file-upload-box div,img{display:inline-block;margin-right:3px;margin-bottom:3px;}
    .y-file-upload-box img{height:100px;}
    .y-file-upload-box div{height:60px;}
    .y-file-upload-box .upload_box{display:none;position:absolute;top:0;height:60px;width:60px;z-index:99;background-color:#fff;border:1px solid #23c6c8;text-align:center;margin:0}
    .y-file-upload-box .upload_box .process{width:100%;height:0;background-color:#23c6c8;position:absolute;bottom:0;left:0;margin:0;padding:0;}
    .y-file-upload-box .upload_box span{position:absolute;left:0;line-height:60px;display:inline-block;width:60px;color:#047d95;font-size:15px}
    .y-random-str-box button{margin-top:5px;}
    .y_icon+i{font-size:20px;position:absolute;right:20px;top:10px;color:#26938a}
</style>
{notempty name="field"}
    <?php
        $isSelect2 = 0;
        $isImg = 0;
        $gRandomStr = 0;
    ?>
    {volist name="field" id="v"}
    <?php
        $col = 'col-md-8';
        $_name  = $v['name'] ?? '';
        $_value = $v['value'] ?? '';
        $_options = $v['options'] ?? [];
        $_required = '';
        $_condition = '';
        $_disabled  = '';
        $_maxLength = $v['length'] ?? '';
        $_multiple  = $v['multiple'] ?? '';
        if(isset($v['col']) && $v['col']){
            $col = 'col-md-'.$v['col'];
        }
        if(isset($v['multiple']) && $v['multiple']){
            $_multiple = 'multiple';
        }
        if(isset($v['disabled']) && $v['disabled']){
            $_disabled  = 'disabled';
        }
        if((($v['type'] == 'select' || $v['type'] == 'select2' || $v['type'] == 'img') && $_multiple) || $v['type'] == 'checkbox'){
            $_name = $_name.'[]';
            $_condition = 'in';
            if(is_array($_value)){
                $_value = implode(',',$_value);
            }
        }
        if(isset($v['required']) && $v['required']){
            $_required = 'required';
        }
    ?>
    {eq name="v.type" value="hidden"}
        <input type="hidden" value="{$_value}" name="{$_name}">
    {else/}
        <div class="form-group row">
            <label class="col-lg-2 col-form-label">{$v.label|default=''}</label>
            <div class="{$col}">
                {switch v.type}
                {case select}
                <select name="{$_name}" class="form-control" {$_disabled} {$_required} {$_multiple}>
                    {volist name="_options" id="_ov"}
                    {eq name="_condition" value="in"}
                    <option value="{$key}" {in name="key" value="$_value"}selected{/in}>{$_ov}</option>
                    {else/}
                    <option value="{$key}" {eq name="_value" value="$key"}selected{/eq}>{$_ov}</option>
                    {/eq}
                    {/volist}
                </select>
                {/case}
                {case select2}
                <?php $isSelect2 = 1;?>
                <select name="{$_name}" class="form-control select2" {$_disabled} {$_required} {$_multiple} data-placeholder="{$v.placeholder|default=''}">
                    {volist name="_options" id="_ov"}
                    {eq name="_condition" value="in"}
                    <option value="{$key}" {in name="key" value="$_value"}selected{/in}>{$_ov}</option>
                    {else/}
                    <option value="{$key}" {eq name="_value" value="$key"}selected{/eq}>{$_ov}</option>
                    {/eq}
                    {/volist}
                </select>
                {/case}
                {case radio}
                {volist name="_options" id="_ov"}
                <label class="radio-inline"><input type="radio" name="{$_name}" value="{$key}" {eq name="_value" value="$key"}checked{/eq} {$_disabled} {$_required}>{$_ov}</label>
                {/volist}
                {/case}
                {case checkbox}
                {volist name="_options" id="_ov"}
                <label class="checkbox-inline"><input type="checkbox" name="{$_name}" value="{$key}" {in name="key" value="$_value"}checked{/in} {$_disabled} {$_required}>{$_ov}</label>
                {/volist}
                {/case}
                {case textarea}
                <textarea name="{$_name}" cols="30" rows="10" class="form-control" maxlength="{$_maxLength}" placeholder="{$v.placeholder|default=''}" {$_disabled} {$_required}>{$_value}</textarea>
                {/case}
                {case img}
                <?php $isImg = 1;?>
                <div class="y-file-upload-box">
                    <img src="{$_value|default='/static/inspinia/img/profile_small.jpg'}" alt="img">
                    <input type="hidden" name="{$_name}" value="{$_value|default='/static/inspinia/img/profile_small.jpg'}">
                    <div>
                        <input type="file" placeholder="请选择上传文件" name="file[]" data-url="{:url('imgUpload')}" class="y-file_upload-btn" {$_multiple}>
                    </div>
                </div>
                {/case}
                {case random_str}
                <?php $gRandomStr = 1;?>
                <div class="y-random-str-box">
                    <input type="text" maxlength="{$_maxLength}" name="{$_name}" placeholder="{$v.placeholder|default=''}" class="form-control" value="{$_value}" {$_disabled}  {$_required}>
                    <button type="button" class="btn btn-xs btn-info _generator">生成</button>
                    <button type="button" class="btn btn-xs btn-warning _clean">清空</button>
                </div>
                {/case}
                {case icon}
                <input type="{$v.type|default='text'}" maxlength="{$_maxLength}" name="{$_name}" placeholder="{$v.placeholder|default=''}" class="form-control y_icon" value="{$_value}" {$_disabled}  {$_required}>
                <i class="fa"></i>
                <span class="form-text m-b-none text-success">图标请参考<a href="http://www.fontawesome.com.cn/faicons/" target="_blank">http://www.fontawesome.com.cn/faicons/</a></span>
                {/case}
                {default /}
                <input type="{$v.type|default='text'}" maxlength="{$_maxLength}" name="{$_name}" placeholder="{$v.placeholder|default=''}" class="form-control" value="{$_value}" {$_disabled}  {$_required}>
                {/switch}
                {notempty name="v.tips"}
                <span class="form-text m-b-none text-warning">{$v.tips|raw}</span>
                {/notempty}
            </div>
        </div>
    {/eq}
    {/volist}
{/notempty}

{eq name="isSelect2" value="1"}
<link href="/static/inspinia/css/plugins/chosen/bootstrap-chosen.css" rel="stylesheet">
<script src="/static/inspinia/js/plugins/chosen/chosen.jquery.js"></script>
<script>
    $(function(){
        $('.select2').chosen({width: "100%"});
    });
</script>
{/eq}

{eq name="gRandomStr" value="1"}
<script>
    $(function(){
        $('.y-random-str-box').on('click','._generator',function(){
            layer.load();
            let self = $(this),len = self.parent().children('input').attr('maxlength');
            $.getJSON('{:url(\'generatorRandomStr\')}',{len},function(res){
                layer.closeAll();
                self.parent().children('input').val(res.data);
            });
        }).on('click','._clean',function(){
            $(this).parent().children('input').val('');
        });
        $('.y_icon').keyup(function(){
            let val = $(this).val(),that = $(this);
            window._ys_tid && clearTimeout(window._ys_tid);
            window._ys_tid = setTimeout(function(){
                that.next('i').removeAttr('class').addClass('fa').addClass(val);
            },1200);
        }).trigger('keyup');
    });
</script>
{/eq}

{eq name="isImg" value="1"}
<script src="/static/plugins/jQuery-File-Upload-9.30.0/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/plugins/jQuery-File-Upload-9.30.0/js/jquery.iframe-transport.js"></script>
<script src="/static/plugins/jQuery-File-Upload-9.30.0/js/jquery.fileupload.js"></script>
<script>
    $(function(){
        setTimeout(function(){
            $('.y-file_upload-btn').fileInputBeautiful().fileupload({
                dataType: 'json',
                uploadAsync: false,
                singleFileUploads: false,
                done:function(e,data){
                    const result = data.result;
                    let multiple = $(e.target).attr('multiple'),
                        imgBox = $(e.target).parent().parent(),
                        _input = imgBox.children('input').eq(0),
                        _img = imgBox.children('img').eq(0);

                    if(result.success){
                        if(multiple){
                            let _continue = $(e.target).attr('data-continue') || false;
                            $.each(result.data,function(i,v){
                                if(!_continue && i === 0){
                                    $(e.target).attr('data-continue',1);
                                    _input.val(v);
                                    _img.attr('src',v);
                                    return;
                                }
                                imgBox.children('div').before(_input.clone().val(v));
                                imgBox.children('div').before(_img.clone().attr('src',v));
                            });
                        }else{
                            _input.val(result.data[0]);
                            _img.attr('src',result.data[0]);
                        }
                        toastr.success(result.msg,'提示');
                        return;
                    }
                    toastr.error(result.msg,'提示');
                },
                progressall:function(e,data){
                    let _button = $(e.target).prev();
                    var progress = parseInt(data.loaded/data.total*100,10);
                    _button.prev().show();
                    _button.prev().children('div').css('height',progress+'%').end().children('span').text(progress+'%');
                    if(progress === 100){
                        setTimeout(function(){
                            _button.prev().hide();
                            _button.prev().children('div').css('height',0).end().children('span').text(0);
                        },200);
                    }
                }
            });
        },100);
    });
</script>
{/eq}
<!-- form field end -->